{extend name="../../admin/view/main"}

{block name="content"}
{include file='shop/goods/formstyle'}
<form action="{:sysuri()}" method="post" data-auto="true" class="layui-form layui-card layui-card-table">

    <div class="layui-card-body padding-left-40 ">
        <fieldset class="layui-bg-gray">
            <legend><span class="layui-badge think-bg-violet">是否支付</span></legend>
            <div>
                {foreach ['未支付','已支付'] as $k => $v}
                {if (isset($vo.payment_status) and $vo.payment_status eq $k) or (empty($vo.payment_status) and $k eq 0)}
                <input checked name="payment_status" title="{$v}" type="radio" value="{$k}">
                {else}
                <input name="payment_status" title="{$v}" type="radio" value="{$k}">
                {/if}{/foreach}
            </div>
        </fieldset>

        <fieldset class="layui-bg-gray">
            <legend><span class="layui-badge think-bg-violet">公证书</span></legend>
            <div>
                <label class="layui-form-item block relative">
                    <span class="color-green font-w7 label-required-prev">公证处</span>
                    <span class="color-desc margin-left-5"></span>
                    <select class="layui-select" lay-search name="notarial_office_id" id="notarial_office_id" lay-filter="notarial_office_id">
                        {foreach $Offices as $cate}
                            <option  value="{$cate.id}">{$cate.name|default=''}</option>
                        {/foreach}
                    </select>
                </label>
                <label class="layui-form-item block relative">
                    <span class="color-green font-w7 label-required-prev">公证事项</span>
                    <span class="color-desc margin-left-5"></span>
                    <select class='layui-select' name='base_type' lay-search lay-filter="matter" id="matter">
                        {foreach ['委托公证','出生公证','亲属关系公正'] as $k=>$v}
                        {if isset($vo.type) && $vo.type eq $k}
                        <option selected value='{$k}'>{$v}</option>
                        {else}
                        <option value='{$k}'>{$v}</option>
                        {/if}{/foreach}
                    </select>
                </label>

                <label class="layui-form-item  relative type_label">
                    <span class="color-green font-w7 label-required-prev">公证类型</span>
                    <span class="color-desc margin-left-5"></span>
                    <select class='layui-select' name='matter_id' lay-search id="matter_id" lay-filter="matter_id" >

                    </select>
                </label>

                <label class="layui-form-item block relative">
                    <span class="color-green font-w7 label-required-prev">公证书份数</span>
                    <span class="color-desc margin-left-5"></span>
                    <input class="layui-input" type="number" min="1" data-blur-number="0" name="number_goods" placeholder="请输入商品限购数量" value="{$vo.number_goods|default=1}">
                </label>

            </div>
        </fieldset>

        <fieldset class="layui-bg-gray client_fieldset">
            <legend>
                <span class="layui-badge think-bg-violet">
                    委托人信息(<span class="client_index">1</span>)
                </span>
                <button type="button" class="layui-btn layui-btn-normal addBtn">+</button>
                <button type="button" class="layui-btn layui-btn-danger delBtn">-</button>
            </legend>
            <div>
                <label class="layui-form-item block relative">
                    <span class="color-green font-w7 label-required-prev client_or_agents_name">委托人姓名</span>
                    <span class="color-desc margin-left-5"></span>
                    <input class="layui-input" name="client_name[]" required value='{$vo.client_name|default=""}'>
                </label>
                <label class="layui-form-item block relative">
                    <span class="color-green font-w7 label-required-prev client_or_agents_phone">委托人电话</span>
                    <span class="color-desc margin-left-5"></span>
                    <input class="layui-input" name="client_phone[]" required value='{$vo.client_phone|default=""}'>
                </label>

                <div class="agents_msg" style="display: none;">
                    <span class="help-label label-required-prev"><b>代理人身份证</b></span>
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th class="nowrap text-center">身份证正面</th>
                            <th class="nowrap text-center">身份证反面</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-if="item.city.length > 0" ng-repeat="item in rules">
                            <td class="padding-0 text-center">
                                <div style="margin: 0 auto;padding:10px 0;">
                                    <input name="front_of_agents_id_card" type="hidden" value="{$vo.front_of_agents_id_card|default=''}">
                                    <script>$('[name="front_of_agents_id_card"]').uploadOneImage();</script>
                                </div>
                            </td>
                            <td class="padding-0 text-center">
                                <div style="margin: 0 auto;padding:5px;">
                                    <input name="reverse_side_of_agents_id_card" type="hidden" value="{$vo.reverse_side_of_agents_id_card|default=''}">
                                    <script>$('[name="reverse_side_of_agents_id_card"]').uploadOneImage();</script>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <span class="help-label label-required-prev"><b>委托人身份证</b></span>
                <table class="layui-table">
                    <thead>
                    <tr>
                        <th class="nowrap text-center">身份证正面</th>
                        <th class="nowrap text-center">身份证反面</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-if="item.city.length > 0" ng-repeat="item in rules">
                        <td class="padding-0 text-center">
                            <div style="margin: 0 auto;padding:10px 0;">
                                <input name="client_front_of_id_card[]" type="hidden" value="{$vo.client_front_of_id_card|default=''}">
                                <script>$('[name="client_front_of_id_card[]"]').uploadOneImage();</script>
                            </div>
                        </td>
                        <td class="padding-0 text-center">
                            <div style="margin: 0 auto;padding:5px;">
                                <input name="client_reverse_side_of_id_card[]" type="hidden" value="{$vo.client_reverse_side_of_id_card|default=''}">
                                <script>$('[name="client_reverse_side_of_id_card[]"]').uploadOneImage();</script>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>

                <span class="help-label"><b>委托人户口本图片</b></span>
                <fieldset class="layui-form-item">
                    <div class="help-images text-center">
                            <input name="client_household_register[]" type="hidden" value="{$vo.client_household_register|default=''}">
                            <script>$('[name="client_household_register[]"]').uploadMultipleImage();</script>
                    </div>
                </fieldset>


                <div id="proof_of_relationship">
                    <span class="help-label"><b>关系证明</b></span>
                    <fieldset class="layui-form-item">
                        <div class="help-images text-center">
                                <input name="proof_of_relationship" type="hidden" value="{$vo.proof_of_relationship|default=''}">
                                <script>$('[name="proof_of_relationship"]').uploadMultipleImage();</script>
                        </div>
                    </fieldset>
                </div>
            </div>

        </fieldset>


        <fieldset class="layui-bg-gray">
            <legend><span class="layui-badge think-bg-violet">婚姻状况</span></span></legend>
            <div>
                <div class="layui-form-item">
                    <!--<span class="color-green font-w7 label-required-prev">婚姻状况</span>-->
                    <span class="color-desc margin-left-5"></span>
                    {foreach ['未婚','已婚','离异'] as $k => $v}
                    <input name="client_marital_status" title="{$v}" type="radio" value="{$k}"  lay-filter="client_marital_status">
                    {/foreach}
                </div>


                <div class="div_marriage_certificate" style="display: none;">
                    <span class="help-label"><b>结婚证</b></span>
                    <fieldset class="layui-form-item">
                        <div class="help-images">
                            <div style="">
                                <input name="client_marriage_certificate" type="hidden" value="{$vo.client_marriage_certificate|default=''}">
                                <script>$('[name="client_marriage_certificate"]').uploadMultipleImage();</script>
                            </div>
                        </div>
                    </fieldset>
                </div>

                <div class="div_divorce_certificate" style="display: none;">
                    <span class="help-label"><b>离婚证</b></span>
                    <fieldset class="layui-form-item">
                        <div class="help-images">
                            <div style="">
                                <input name="client_divorce_certificate" type="hidden" value="{$vo.client_divorce_certificate|default=''}">
                                <script>$('[name="client_divorce_certificate"]').uploadMultipleImage();</script>
                            </div>
                        </div>
                    </fieldset>


                    <!--<span class="help-label"><b>离婚协议</b></span>-->
                    <!--<fieldset class="layui-form-item">-->
                    <!--    <div class="help-images">-->
                    <!--            <input name="client_divorce_agreement" type="hidden" value="">-->
                    <!--            <script>$('[name="client_divorce_agreement"]').uploadMultipleImage();</script>-->
                    <!--    </div>-->
                    <!--</fieldset>-->
                </div>

            </div>

        </fieldset>

        <div id="entrusted_notarization">
            <fieldset class="layui-bg-gray">
            <legend><span class="layui-badge think-bg-violet">房产信息</span></span></legend>
            <div>
                <span class="help-label"><b>房产证</b></span>
                <fieldset class="layui-form-item">
                    <div class="help-images text-center">
                            <input name="client_property_ownership_certificate" type="hidden" value="">
                            <script>$('[name="client_property_ownership_certificate"]').uploadMultipleImage();</script>
                    </div>
                </fieldset>


                <span class="help-label"><b>购房协议</b></span>
                <fieldset class="layui-form-item">
                    <div class="help-images text-center">
                            <input name="client_house_purchase_agreement" type="hidden" value="">
                            <script>$('[name="client_house_purchase_agreement"]').uploadMultipleImage();</script>
                    </div>
                </fieldset>

                <span class="help-label"><b>房产信息查询(产调)</b></span>
                <fieldset class="layui-form-item">
                    <div class="help-images text-center">
                            <input name="client_property_information" type="hidden" value="">
                            <script>$('[name="client_property_information"]').uploadMultipleImage();</script>
                    </div>
                </fieldset>

            </div>

        </fieldset>


            <fieldset class="layui-bg-gray client_fieldset1">
                <legend>
                    <span class="layui-badge think-bg-violet">
                        受托人(<span class="client_index">1</span>)
                    </span>
                    <button type="button" class="layui-btn layui-btn-normal addBtn1">+</button>
                    <button type="button" class="layui-btn layui-btn-danger delBtn1">-</button>
                </legend>
                <div>
                    <span class="help-label"><b>受托人身份证</b></span>
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th class="nowrap text-center">身份证正面</th>
                            <th class="nowrap text-center">身份证反面</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-if="item.city.length > 0" ng-repeat="item in rules">
                            <td class="padding-0 text-center">
                                <div style="margin: 0 auto;padding:10px 0;">
                                    <input name="trustee_id_card_z[]" type="hidden" value="">
                                    <script>$('[name="trustee_id_card_z[]"]').uploadOneImage();</script>
                                </div>
                            </td>
                            <td class="padding-0 text-center">
                                <div style="margin: 0 auto;padding:5px;">
                                    <input name="trustee_id_card_f[]" type="hidden" value="">
                                    <script>$('[name="trustee_id_card_f[]"]').uploadOneImage();</script>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

            </fieldset>
        </div>

        <div id="parental_information">
            <div class="layui-form-item">
                <span class="help-label"><b>父母身份证</b></span>
                <table class="layui-table">
                    <thead>
                    <tr>
                        <th class="nowrap text-center">父亲身份证正面</th>
                        <th class="nowrap text-center">父亲身份证反面</th>
                        <th class="nowrap text-center">母亲身份证正面</th>
                        <th class="nowrap text-center">母亲身份证反面</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-if="item.city.length > 0" ng-repeat="item in rules">
                        <td class="padding-0 text-center">
                            <div style="margin: 0 auto;padding:10px 0;">
                                <input name="front_of_fathers_id_card" type="hidden" value="{$vo.front_of_fathers_id_card|default=''}">
                                <script>$('[name="front_of_fathers_id_card"]').uploadOneImage();</script>
                            </div>
                        </td>
                        <td class="padding-0 text-center">
                            <div style="margin: 0 auto;padding:10px 0;">
                                <input name="reverse_side_of_fathers_id_card" type="hidden" value="{$vo.reverse_side_of_fathers_id_card|default=''}">
                                <script>$('[name="reverse_side_of_fathers_id_card"]').uploadOneImage();</script>
                            </div>
                        </td>
                        <td class="padding-0 text-center">
                            <div style="margin: 0 auto;padding:10px 0;">
                                <input name="front_of_mothers_id_card" type="hidden" value="{$vo.front_of_mothers_id_card|default=''}">
                                <script>$('[name="front_of_mothers_id_card"]').uploadOneImage();</script>
                            </div>
                        </td>
                        <td class="padding-0 text-center">
                            <div style="margin: 0 auto;padding:10px 0;">
                                <input name="reverse_side_of_mothers_id_card" type="hidden" value="{$vo.reverse_side_of_mothers_id_card|default=''}">
                                <script>$('[name="reverse_side_of_mothers_id_card"]').uploadOneImage();</script>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <span class="help-label"><b>父母户口本</b></span>
            <fieldset class="layui-form-item">
                <div class="help-images">
                    <input name="parents_household_register" type="hidden" value="{$vo.parents_household_register|default=''}">
                    <script>$('[name="parents_household_register"]').uploadMultipleImage();</script>
                </div>
            </fieldset>
        </div>

        <span class="help-label"><b>其他</b></span>
        <fieldset class="layui-form-item">
            <div class="help-images">
                <input name="other" type="hidden" value="{$vo.other|default=''}">
                <script>$('[name="other"]').uploadMultipleImage();</script>
            </div>
        </fieldset>

        <div class="layui-form-item video_forensics_div">
            <span class="color-green font-w7">视频取证</span>
            <div class="layui-input-block" style='margin-left: 0;'>
                <div class="layui-form-item">
                  <input type="checkbox" name="video_forensics" lay-skin="switch" lay-text="开启|关闭" checked value="1">
                </div>
            </div>
        </div>
        <div class="layui-form-item proxy_statement_div">
            <span class="color-green font-w7 label-required-prev">委托书</span>
            <span class="color-desc margin-left-5"></span>
            <table class="layui-table">
                <thead>
                <tr>
                    <th class="text-center" style="width:90px">委托书</th>
                </tr>
                <tr>
                    <th>
                        <div class="relative block">
                            <textarea class="layui-hide" name="proxy_statement" placeholder="请输入委托书">{$vo.proxy_statement|default=''}</textarea>
                        </div>
                    </th>
                </tr>
                </thead>
            </table>
        </div>
        <div class="layui-form-item read_agreement_div">
            <span class="color-green font-w7 label-required-prev">阅读协议</span>
            <span class="color-desc margin-left-5"></span>
            <table class="layui-table">
                <thead>
                <tr>
                    <th class="text-center" style="width:90px">公证申请表</th>
                </tr>
                <tr>
                    <th>
                        <div class="relative block">
                            <textarea class="layui-hide" name="read_agreement5" placeholder="请输入公证申请表">{$vo.read_agreement5|default=''}</textarea>
                        </div>
                    </th>
                </tr>
                <tr>
                    <th class="text-center" style="width:90px">公证受理通知单</th>
                </tr>
                <tr>
                    <th>
                        <div class="relative block">
                            <textarea class="layui-hide" name="read_agreement4" placeholder="请输入公证受理通知单">{$vo.read_agreement4|default=''}</textarea>
                        </div>
                    </th>
                </tr>
                <tr>
                    <th class="text-center" style="width:90px">公证告知书</th>
                </tr>
                <tr>
                    <th>
                        <div class="relative block">
                            <textarea class="layui-hide" name="read_agreement3" placeholder="请输入公证告知书">{$vo.read_agreement3|default=''}</textarea>
                        </div>
                    </th>
                </tr>
                <tr>
                    <th class="text-center" style="width:90px">谈话笔录</th>
                </tr>
                <tr>
                    <th>
                        <div class="relative block">
                            <textarea class="layui-hide" name="read_agreement2" placeholder="请输入谈话笔录">{$vo.read_agreement2|default=''}</textarea>
                        </div>
                    </th>
                </tr>

                <tr>
                    <th class="text-center" style="width:90px">其他</th>
                </tr>
                <tr>
                    <th>
                        <div class="relative block">
                            <textarea class="layui-hide" name="read_agreement1" placeholder="请输入其他">{$vo.read_agreement1|default=''}</textarea>
                        </div>
                    </th>
                </tr>







                </thead>
            </table>
        </div>

        <div class="layui-form-item text-center">
            <button class="layui-btn" type='submit'>保存数据</button>
            <button class="layui-btn layui-btn-danger" data-close data-confirm="确定要取消吗？" type='button'>取消编辑</button>
        </div>
    </div>
</form>
{/block}
{block name='script'}
<script>
    layui.use(['form'], function () {
        var form = layui.form
            , $ = layui.$;

        //动态添加
        add_ele(".addBtn",".client_fieldset")
        add_ele(".addBtn1",".client_fieldset1")
        function add_ele(ele,p_ele)
        {
            $("form").on("click",ele,function () {
                let add_node = $(this).parents(p_ele).clone()
                add_node.find("input").val("");
                add_node.find(".uploadimage").attr("style","")
                add_node.find(".uploadimagemtl").remove()
                add_node.find("a[data-file='image'],a[data-file='mul']").remove()

                let H = $(this).parents(p_ele).height()

                //找到最大的数 +1
                let index = 1;
                $(this).parents('form').find(p_ele).each(function(){
                    let i = $(this).find(".client_index").text()
                    index = index<i ? i:index;
                })

                add_node.find(".client_index").text(index*1+1);

                var str_html = add_node[0].outerHTML;
                                console.log(str_html)

                //委托人序号+1
                $(this).parents(p_ele).after(str_html);
                // 获取拷贝的元素的高度
                let top = $(".layui-card-body").eq(0).scrollTop();
                console.log(top+'|||'+H)
                $(".layui-card-body").eq(0).scrollTop(top+H)
            });
        }
        del_ele(".delBtn",".client_fieldset")
        del_ele(".delBtn1",".client_fieldset1")
        function del_ele(ele,p_ele)
        {
            $("form").on("click",ele,function () {
                var allelement = $(this).parents('form').find(p_ele)
                var ele = $(this).parents(p_ele);
                if(allelement.length<=1){
                    layer.msg('至少留一个');
                }else{
                    ele.remove();
                }
            });
        }





        // 不同公证事项显示不同的表单
        $(function(){
            // 公证事项  0 多人委托 1出生公证 2亲属关系公证
            var selectedOption = $("#matter").find("option:selected").val(); //value值
            if (selectedOption == 0) {
                $(".addBtn,delBtn").show();
                $("#proof_of_relationship").hide(); //关系证明
                $("#entrusted_notarization").show(); //房产
                $("#parental_information").hide(); //父母
            } else if (selectedOption == 1) {
                $(".addBtn,delBtn").hide();
                $("#proof_of_relationship").hide();//关系证明
                $("#entrusted_notarization").hide();//房产
                $("#parental_information").show(); //父母
            } else {
                $(".addBtn,delBtn").hide();
                $("#proof_of_relationship").show();//关系证明
                $("#entrusted_notarization").hide();//房产
                $("#parental_information").show(); //父母
            }
        });
        form.on("radio(client_marital_status)", function (data) {
            //未婚
            if (data.value == 0) {
                $(".div_marriage_certificate,.div_divorce_certificate").hide();
            }
            //已婚
            else if (data.value == 1) {
                $(".div_marriage_certificate,.div_divorce_certificate").hide();
                $(".div_marriage_certificate").show();
            }
            //离异
            else {
                $(".div_marriage_certificate,.div_divorce_certificate").hide();
                $(".div_divorce_certificate").show();
            }
        })
        form.on("select(matter)", function (data) {
            if (data.value == 0) {
                $(".addBtn,.delBtn").show();
                $("#proof_of_relationship").hide(); //关系证明
                $("#entrusted_notarization").show(); //房产
                $("#parental_information").hide(); //父母
                //委托书
                $(".proxy_statement_div").show(); //委托书


	            $('.type_label').hide();
            } else if (data.value == 1) {
                $(".addBtn,.delBtn").hide();
                $("#proof_of_relationship").hide();
                $("#entrusted_notarization").hide();
                $("#parental_information").show(); //父母
                //委托书
                $(".proxy_statement_div").hide(); //委托书

	            $('.type_label').show();
            } else {
                $(".addBtn,.delBtn").hide();
                $("#proof_of_relationship").show();
                $("#entrusted_notarization").hide();
                $("#parental_information").show(); //父母
                //委托书
                $(".proxy_statement_div").hide(); //委托书
	            $('.type_label').show();
            }

            // 二级联动
            let notarial_office_id = $("#notarial_office_id").val()
            postData = {'matter': data.value,'notarial_office_id':notarial_office_id};
            url = "{:url('linkage')}";
            $.post(url, postData, function (result) {
                //将信息填充到html中
                html = "";
                $(result).each(function (i) {
                    html += "<option value='" + this.id + "'>" + this.name + "</option>";
                });
                $('#matter_id').html(html);
                form.render();
                $("#matter_id").next().find('.layui-this').trigger('click')
            }, 'json')
        });


        form.on("select(matter_id)", function (data) {
            //本人办理
            if (data.value == 1 || $("#matter").val() == 0) {
                $(".agents_msg").hide();
                $(".client_or_agents_name").text("委托人姓名")
                $(".client_or_agents_phone").text("委托人电话")
            }
            //代理人办理
            else if (data.value == 2) {
                $(".agents_msg").show();
                $(".client_or_agents_name").text("代理人姓名")
                $(".client_or_agents_phone").text("代理人电话")
            }
        });
        layui.form.render();
        $("#matter").next().find('.layui-this').trigger('click')
        form.on("select(notarial_office_id)", function (data) {
            $("#matter").next().find('.layui-this').trigger('click')
        })

        require(['ckeditor'], function () {
            window.createEditor('[name=proxy_statement]', {height: 350})
            window.createEditor('[name=read_agreement1]', {height: 350})
            window.createEditor('[name=read_agreement2]', {height: 350})
            window.createEditor('[name=read_agreement3]', {height: 350})
            window.createEditor('[name=read_agreement4]', {height: 350})
            window.createEditor('[name=read_agreement5]', {height: 350})
        });

    })
</script>
{/block}